<template>
  <div class="type-screen">
    <!-- 木材/家具切换 -->
    <el-row class="screen-tags">
      <div
        class="tags-item"
        :class="{'hidden_type':type_Flag != 'wood'}"
        @click="type_switching('wood')"
      >
        <span>木材</span>
        <i class="bg-tag"></i>
      </div>
      <div
        class="tags-item"
        :class="{'hidden_type':type_Flag != 'furniture'}"
        @click="type_switching('furniture')"
      >
        <span>家具</span>
        <i class="bg-tag"></i>
      </div>
    </el-row>

    <!-- 木材筛选列表 -->
    <div v-if="type_Flag=='wood'">
      <el-row class="screen-wrapper" :class="{'hidden':!areaMoreFlag}">
        <el-col class="label">区域：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 区域全部 -->
            <el-col :class="{'active':categoryActive == -1}" class="screen-item">
              <span @click="selectCategory(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':areaLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if="areaMoreFlag"
                  @click="areaLetter(index)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 区域筛选列表 -->
            <template v-for="(item,index) in areaList">
              <el-col
                :key="index"
                :class="{'active':categoryActive == item.id}"
                class="screen-item"
              >
                <span @click="selectCategory(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 区域更多/收起 -->
        <el-col class="screen-more">
          <span v-if="areaList.length > 11" class="more" @click="more('area')">
            {{areaMoreFlag ? '收起' : '更多'}}
            <i
              :class="areaMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
          <span v-else></span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!placeMoreFlag}">
        <el-col class="label">产地：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 产地全部 -->
            <el-col :class="{'active':placeActive == -1}" class="screen-item">
              <span @click="selectPlace(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':placeLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if=" placeMoreFlag"
                  @click="placeLetter(index,item.value)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 产地筛选列表 -->
            <template v-for="(item,index) in placeList">
              <el-col :key="index" :class="{'active':placeActive == item.id}" class="screen-item">
                <span @click="selectPlace(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 产地更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':placeList.length <= 11}">
          <span class="more" @click="more('place')">
            {{placeMoreFlag ? '收起' : '更多'}}
            <i
              :class="placeMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!nameMoreFlag}">
        <el-col class="label">品名：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 品名全部 -->
            <el-col :class="{'active':productActive == -1}" class="screen-item">
              <span @click="selectProduct(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':nameLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if=" nameMoreFlag"
                  @click="nameLetter(index,item.value)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 品名筛选列表 -->
            <template v-for="(item,index) in productName">
              <el-col :key="index" :class="{'active':productActive == item.id}" class="screen-item">
                <span @click="selectProduct(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 品名更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':productName.length <= 11}">
          <span class="more" @click="more('name')">
            {{nameMoreFlag ? '收起' : '更多'}}
            <i
              :class="nameMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!stateMoreFlag}">
        <el-col class="label">形态：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 形态全部 -->
            <el-col :class="{'active':stateActive == -1}" class="screen-item">
              <span @click="selectState(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':stateLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if="stateMoreFlag"
                  @click="stateLetter(index)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 形态筛选列表 -->
            <template v-for="(item,index) in stateList">
              <el-col :key="index" :class="{'active':stateActive == item.id}" class="screen-item">
                <span @click="selectState(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 形态更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':stateList.length <= 11}">
          <span v-if="stateList.length > 11" class="more" @click="more('state')">
            {{stateMoreFlag ? '收起' : '更多'}}
            <i
              :class="stateMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
          <span v-else></span>
        </el-col>
      </el-row>
    </div>

    <!-- 家具筛选列表 -->
    <div v-else>
      <el-row class="screen-wrapper" :class="{'hidden':!typeMoreFlag}">
        <el-col class="label">类型：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 类型全部 -->
            <el-col :class="{'active':typeActive == -1}" class="screen-item">
              <span @click="selectType(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':typeLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if="typeMoreFlag"
                  @click="typeLetter(index)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 类型筛选列表 -->
            <template v-for="(item,index) in furScreenList.categorys">
              <el-col :key="index" :class="{'active':typeActive == item.id}" class="screen-item">
                <span @click="selectType(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 类型更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':furScreenList.categorys.length <= 11}">
          <span v-if="furScreenList.categorys.length > 11" class="more" @click="more('type')">
            {{typeMoreFlag ? '收起' : '更多'}}
            <i
              :class="typeMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
          <span v-else></span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!furPlaceMoreFlag}">
        <el-col class="label">产地：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 产地全部 -->
            <el-col :class="{'active':furPlaceActive == -1}" class="screen-item">
              <span @click="selectFurPlace(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':furPlaceLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if=" furPlaceMoreFlag"
                  @click="furPlaceLetter(index,item.value)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 产地筛选列表 -->
            <template v-for="(item,index) in furScreenList.provinces">
              <el-col
                :key="index"
                :class="{'active':furPlaceActive == item.id}"
                class="screen-item"
              >
                <span @click="selectFurPlace(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 产地更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':furScreenList.provinces.length <= 11}">
          <span class="more" @click="more('furPlace')">
            {{furPlaceMoreFlag ? '收起' : '更多'}}
            <i
              :class="furPlaceMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!nameMoreFlag}">
        <el-col class="label">材质：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 材质全部 -->
            <el-col :class="{'active':materActive == -1}" class="screen-item">
              <span @click="selectMater(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 字母筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':materLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if=" materMoreFlag"
                  @click="materLetter(index,item.value)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 材质筛选列表 -->
            <template v-for="(item,index) in furScreenList.materias">
              <el-col :key="index" :class="{'active':materActive == item.id}" class="screen-item">
                <span @click="selectMater(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 材质更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':furScreenList.materias.length <= 11}">
          <span class="more" @click="more('mater')">
            {{materMoreFlag ? '收起' : '更多'}}
            <i
              :class="materMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
        </el-col>
      </el-row>

      <el-row class="screen-wrapper" :class="{'hidden':!brandMoreFlag}">
        <el-col class="label">品牌：</el-col>
        <el-col class="screen-content">
          <el-row>
            <!-- 品牌全部 -->
            <el-col :class="{'active':brandActive == -1}" class="screen-item">
              <span @click="selectBrand(-1)" class="all-tag">全部</span>
            </el-col>
            <!-- 品牌筛选 -->
            <template v-for="(item,index) in letterList">
              <el-col
                :key="item.name"
                class="screen-item"
                :class="{'letterActive':brandLetterIndex == index}"
              >
                <span
                  :class="{'hiddenLetter':index == 9 || index == 10}"
                  v-if="brandMoreFlag"
                  @click="brandLetter(index)"
                >{{item.name}}</span>
              </el-col>
            </template>
            <!-- 品牌筛选列表 -->
            <template v-for="(item,index) in furScreenList.brands">
              <el-col :key="index" :class="{'active':brandActive == item.id}" class="screen-item">
                <span @click="selectBrand(item.id)" :title="item.name">{{item.name}}</span>
              </el-col>
            </template>
          </el-row>
        </el-col>
        <!-- 品牌更多/收起 -->
        <el-col class="screen-more" :class="{'hidden-more':furScreenList.brands.length <= 11}">
          <span v-if="furScreenList.brands.length > 11" class="more" @click="more('brand')">
            {{brandMoreFlag ? '收起' : '更多'}}
            <i
              :class="brandMoreFlag ? 'el-icon-arrow-up':'el-icon-arrow-down'"
            ></i>
          </span>
          <span v-else></span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    category: {
      type: Array,
    },
    placeList: {
      type: Array,
    },
    productName: {
      type: Array,
    },
    stateList: {
      type: Array,
    },
    areaList: {
      type: Array,
    },
    furScreenList: {
      type: Object,
    },
  },
  data() {
    return {
      type_Flag: "wood",
      categoryCurr: 0,
      categoryActive: -1,
      productActive: -1,
      placeActive: -1,
      stateActive: -1,
      areaLetterIndex: -1,
      placeLetterIndex: -1,
      nameLetterIndex: -1,
      stateLetterIndex: -1,
      typeActive: -1,
      furPlaceActive: -1,
      materActive: -1,
      brandActive: -1,
      typeLetterIndex: -1,
      furPlaceLetterIndex: -1,
      materLetterIndex: -1,
      brandLetterIndex: -1,
      productMore: false,
      placeMore: false,
      moreFlag: "",
      areaMoreFlag: false,
      placeMoreFlag: false,
      nameMoreFlag: false,
      stateMoreFlag: false,
      typeMoreFlag: false,
      furPlaceMoreFlag: false,
      materMoreFlag: false,
      brandMoreFlag: false,
      letterList: [
        {
          name: "A B C",
          value: "a,b,c",
          id: 1,
        },
        {
          name: "D E F",
          value: "d,e,f",
          id: 2,
        },
        {
          name: "G H I",
          value: "g,h,i",
          id: 3,
        },
        {
          name: "J K L",
          value: "j,k,l",
          id: 4,
        },
        {
          name: "M N O",
          value: "m,n,o",
          id: 5,
        },
        {
          name: "P Q R",
          value: "p,q,r",
          id: 6,
        },
        {
          name: "S T U",
          value: "s,t,u",
          id: 7,
        },
        {
          name: "V W X",
          value: "v,w,x",
          id: 8,
        },
        {
          name: "Y Z",
          value: "y,z,",
          id: 9,
        },
        {
          name: "--",
          value: "",
          id: 10,
        },
        {
          name: "-",
          value: "",
          id: 11,
        },
      ],
    };
  },
  methods: {
    // 家具木材切换
    type_switching(type) {
      if (this.type_Flag != type) {
        this.type_Flag = type;
        this.$emit("type_switch", type);
      }
    },
    // 默认
    defalutHandle() {
      if (this.type_Flag == "wood") {
        this.selectCategory(-2);
      } else {
        this.typeActive = -1;
        this.furPlaceActive = -1;
        this.materActive = -1;
        this.brandActive = -1;
        this.typeLetterIndex = -1;
        this.furPlaceLetterIndex = -1;
        this.materLetterIndex = -1;
        this.brandLetterIndex = -1;
      }
    },
    // 木材区域字母筛选
    areaLetter(index) {
      this.areaLetterIndex = index;
    },
    // 木材产地字母筛选
    placeLetter(index, val) {
      console.log(val);
      if (this.placeLetterIndex != index) {
        this.placeLetterIndex = index;
        this.$emit("palceLetter", val);
      }
    },
    // 木材品名字母筛选
    nameLetter(index, val) {
      if (this.nameLetterIndex != index) {
        this.nameLetterIndex = index;
        this.$emit("nameLetter", val);
      }
    },
    // 木材形态字母筛选
    stateLetter(index) {
      this.stateLetterIndex = index;
    },
    // 家具类型字母筛选
    typeLetter(index) {
      this.typeLetterIndex = index;
    },
    // 家具产地字母筛选
    furPlaceLetter(index, val) {
      if (this.furPlaceLetterIndex != index) {
        this.furPlaceLetterIndex = index;
        this.$emit("furPlaceLetter", val);
      }
    },
    // 家具材质字母筛选
    materLetter(index, val) {
      if (this.materLetterIndex != index) {
        this.materLetterIndex = index;
        this.$emit("materLetter", val);
      }
    },
    // 家具品牌字母筛选
    brandLetter(index, val) {
      if (this.brandLetterIndex != index) {
        this.brandLetterIndex = index;
        this.$emit("brandLetter", val);
      }
    },
    // 木材选择区域
    selectCategory(id) {
      console.log("点击区域了", id, this.categoryActive);
      if (id != this.categoryActive || id == -2) {
        this.placeActive = -1;
        this.productActive = -1;
        this.placeLetterIndex = -1;
        this.nameLetterIndex = -1;
        this.categoryActive = id == -2 ? -1 : id;
        let paramId = id == -2 ? "" : id;
        if (id == -2) {
          this.stateActive = -1;
          this.$emit("areaScreen", paramId, "defalut");
        } else {
          this.$emit("areaScreen", paramId);
        }
      }
    },
    // 木材选择产地
    selectPlace(id) {
      console.log("点击产地了");
      if (id == -1 && this.placeLetterIndex > -1) {
        this.placeLetterIndex = -1;
        this.$emit("palceLetter", "");
      }
      if (id != this.placeActive) {
        this.productActive = -1;
        this.nameLetterIndex = -1;
        this.placeActive = id;
        this.$emit("placeScreen", id);
      }
    },
    // 木材选择品名
    selectProduct(id) {
      console.log("点击品名了");
      if (id == -1 && this.nameLetterIndex > -1) {
        this.nameLetterIndex = -1;
        this.$emit("nameLetter", "");
      }

      if (id != this.productActive) {
        this.productActive = id;
        this.$emit("produceScreen", id);
      }
    },
    // 木材选择形态
    selectState(id) {
      if (id != this.stateActive) {
        this.stateActive = id;
        this.$emit("stateScreen", id);
      }
    },
    // 家具选择类型
    selectType(id) {
      if (this.typeActive != id) {
        this.typeActive = id;
        this.$emit("typeScreen", id);
      }
    },
    // 家具选择产地
    selectFurPlace(id) {
      if (id == -1 && this.furPlaceLetterIndex > -1) {
        this.furPlaceLetterIndex = -1;
        this.$emit("furPlaceLetter", "");
      }
      if (this.furPlaceActive != id) {
        this.furPlaceActive = id;
        this.$emit("furPlaceScreen", id);
      }
    },
    // 家具选择材质
    selectMater(id) {
      if (this.materActive != id) {
        this.materActive = id;
        this.$emit("materScreen", id);
      }
    },
    // 家具选择品牌
    selectBrand(id) {
      if (this.brandActive != id) {
        this.brandActive = id;
        this.$emit("brandScreen", id);
      }
    },
    // 展开更多
    more(type) {
      console.log(type);
      if (type == "area") {
        this.areaMoreFlag = !this.areaMoreFlag;
      } else if (type == "place") {
        this.placeMoreFlag = !this.placeMoreFlag;
      } else if (type == "name") {
        this.nameMoreFlag = !this.nameMoreFlag;
      } else if (type == "state") {
        this.stateMoreFlag = !this.stateMoreFlag;
      } else if (type == "type") {
        this.typeMoreFlag = !this.typeMoreFlag;
      } else if (type == "furPlace") {
        this.furPlaceMoreFlag = !this.furPlaceMoreFlag;
      } else if (type == "mater") {
        this.materMoreFlag = !this.materMoreFlag;
      } else if (type == "brand") {
        this.brandMoreFlag = !this.brandMoreFlag;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.type-screen {
  width: 100%;
  height: 100%;
  overflow: auto;
  .screen-tags {
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    background: #f9f9f9;
    border-bottom: 1px solid #ececec;

    .tags-item {
      width: 160px;
      text-align: center;
      cursor: pointer;
      background: #fff;
      position: relative;
      float: left;
      font-weight: 600;
      color: #111;
      &.hidden_type {
        background: none;
        font-weight: 400;
        .bg-tag {
          display: none;
        }
      }
      span {
        position: relative;
        z-index: 2;
      }
      .bg-tag {
        background: url("../../../assets/hall/bg_tag.png") no-repeat;
        position: absolute;
        width: 192px;
        height: 100%;
        top: 0;
        left: -16px;
      }
    }
  }
  .category-wrapper {
    overflow: hidden;
    position: relative;
    .category-arrow {
      position: absolute;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: rgba(255, 219, 190, 0.3);
      color: #fff;
      font-size: 24px;
      border-radius: 50%;
      cursor: pointer;
      top: 21px;
      z-index: 9;
      &.left {
        left: 5px;
      }
      &.right {
        right: 5px;
      }
      &:hover {
        background: rgba(255, 219, 190, 0.7);
      }
    }
    .category-list {
      white-space: nowrap;
      .carategory-scroll {
        transition: all 0.3s ease-in-out;
      }
      .category-item {
        vertical-align: top;
        display: inline-flex;
        width: 12.5%;
        color: #404040;
        height: 80px;
        align-items: center;
        justify-content: center;
        font-size: 0;
        cursor: pointer;
        &.active {
          color: #fe6616;
          background: #fff;
          .wrapper {
            .abbrev {
              border: 1px solid #fe6616;
            }
          }
        }
        .wrapper {
          display: flex;
          align-items: center;
          .abbrev {
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            margin-right: 8px;
            vertical-align: top;
            font-size: 14px;
            border: 1px solid #111;
            text-align: center;
            line-height: 28px;
            border-radius: 50%;
          }
          .name-wrapper {
            flex: 1;
            line-height: 12px;
            font-size: 14px;
            p {
              margin: 0;
              &:first-child {
                margin-bottom: 4px;
              }
            }
          }
        }
      }
    }
  }
  .screen-wrapper {
    font-size: 14px;
    color: #8e8e8e;
    height: auto;
    line-height: 45px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
    &.hidden {
      height: 45px;
    }
    .label {
      text-align: center;
      width: 5%;
    }
    .screen-content {
      width: 90%;
      .screen-item {
        width: 8%;
        text-align: left;
        span {
          display: inline-block;
          font-size: 14px;
          height: 24px;
          line-height: 24px;
          padding: 0 8px;
          border-radius: 2px;
          color: #404040;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 100px;
          margin-top: 10px;
          cursor: pointer;
          &:hover {
            color: #fe6616;
          }
          &.all-tag {
            margin-left: 8px;
          }
          &.hiddenLetter {
            opacity: 0;
            cursor: initial;
            pointer-events: none;
          }
        }
        &.active {
          span {
            background: #fe6616;
            color: #fff;
            &:hover {
              color: #fff;
            }
          }
        }
        &.letterActive {
          span {
            background: none;
            color: #fe6616;
          }
        }
      }
    }
    .screen-more {
      width: 5%;
      &.hidden-more {
        opacity: 0;
        cursor: initial;
        pointer-events: none;
      }
      .more {
        display: inline-block;
        line-height: 26px;
        height: 26px;
        border: 1px solid #ebecf0;
        color: #8e8e8e;
        right: 30px;
        top: 6px;
        padding: 0 8%;
        background-color: #fff;
        cursor: pointer;
        z-index: 9;
      }
    }
  }
}
</style>
